<template>
  <el-dialog :title="`${isEdit ? '编辑' : '新增'}传感器基站`" :visible.sync="dialogVisible" width="710px" :close-on-click-modal="false" :before-close="close">
    <div>
      <el-form ref="RefForm" :model="formData" label-width="120px" :inline="true" :validate-on-rule-change="false" :rules="formRules" status-icon>
        <el-form-item label="基站名称" prop="name">
          <el-input v-model="formData.name" maxlength="10" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="基站编号" prop="code">
          <el-input v-model="formData.code" maxlength="30" show-word-limit></el-input>
        </el-form-item>
        <!-- <el-form-item label="基站模型" prop="password">
          <el-input v-model="formData.password"></el-input>
        </el-form-item>-->
        <!-- <el-form-item label="通信IP" prop="ip">
          <el-input v-model="formData.ip" maxlength="11" show-word-limit></el-input>
        </el-form-item> -->
        <el-form-item v-for="item in AlertList" :key="item.label" :label="item.label" :prop="item.value">
          <el-input v-model="formData[item.value]" maxlength="10" show-word-limit></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :loading="loadingSubmit" type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { eleValidator } from '@/utils/tools'
  export default {
    mixins: [dialogEditMixin],
    data() {
      function AlertProp(name) {
        return [
            { required: true, message: `请输入${name}`, trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isEmpty', msg: `${name}不能为空` }
              ]),
              trigger: 'blur'
            }
          ]
      }
      return {
        AlertList: [
          { label: '湿度', value: 'humidityLabel' },
          { label: '湿度报警值', value: 'humidityAlertValue' },
          { label: '温度', value: 'temperatureLabel' },
          { label: '温度报警值', value: 'temperatureAlertValue' },
          { label: '一氧化碳', value: 'coLabel' },
          { label: '一氧化碳报警值', value: 'coAlertValue' },
          { label: '二氧化碳', value: 'cO2Label'},
          { label: '二氧化碳报警值', value: 'cO2AlertValue' },
          { label: '氧气', value: 'o2Lable'},
          { label: '氧气报警值', value: 'o2AlertValue' },
          { label: '二氧化氮', value: 'nO2Lable'},
          { label: '二氧化氮报警值', value: 'nO2AlertValue' },
          { label: '噪声', value: 'noiseLable' },
          { label: '噪声报警值', value: 'noiseAlertValue' },
        ],
        formRules: {
          name: [
            { required: true, message: '请输入基站名称', trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isEmpty', msg: '基站名称不能为空' },
                { rule: 'isRepeat', msg: { value: '基站名称重复', url: '/SensorStation/Exists', key: 'name' } }
              ]),
              trigger: 'blur'
            }
          ],
          code: [
            { required: true, message: '请输入基站编号', trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isEmpty', msg: '基站编码不能为空' },
                { rule: 'isRepeat', msg: { value: '基站编码重复', url: '/SensorStation/Exists', key: 'code' } },
                { rule: 'isNumberLetter', msg: '只能输入数字和字母' },
              ]), trigger: 'blur'
            }
          ],
          ip: [
            { required: true, message: '请输入基站IP', trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isEmpty', msg: '基站IP不能为空' },
                { rule: 'isRepeat', msg: { value: '基站IP重复', url: '/SensorStation/Exists', key: 'ip' } },
                { rule: 'isIp', msg: '只能输入数字和点' },
              ]), trigger: 'blur'
            }
          ],
          port: [
            { required: true, message: '请输入基站端口', trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isEmpty', msg: '基站端口不能为空' },
                { rule: 'isNumber', msg: '只能输入数字' },
              ]), trigger: 'blur'
            }
          ],
          humidityLabel: AlertProp('湿度'),
          humidityAlertValue: AlertProp('湿度'),
          temperatureLabel: AlertProp('温度'),
          temperatureAlertValue: AlertProp('温度报警值'),
          coLabel: AlertProp('一氧化碳'),
          coAlertValue: AlertProp('一氧化碳报警值'),
          cO2Label: AlertProp('二氧化碳'),
          cO2AlertValue: AlertProp('二氧化碳报警值'),
          o2Lable: AlertProp('氧气'),
          humido2AlertValueityLabel: AlertProp('氧气报警值'),
          nO2Lable: AlertProp('二氧化氮'),
          nO2AlertValue: AlertProp('二氧化氮报警值'),
          noiseLable: AlertProp('噪声'),
          noiseAlertValue: AlertProp('噪声报警值'),
        },
        apiKey: {
          search: '/SensorStation/',
          add: '/SensorStation',
          put: '/SensorStation/'
        }
      }
    },
    watch: {
      dialogVisible: function (newValue, oldValue) {
        if (newValue) { return }
        this.$refs.RefForm.clearValidate()
      }
    },
    methods: {
      resetFormData() {
        this.formData = {
          name: '',
          code: '',
          ip: '',
          port: '',
          note: '',
          humidityLabel: '', //"洞口湿度"
          humidityAlertValue: null,
          temperatureLabel: '', //"温度"
          temperatureAlertValue: null,
          coLabel: '', //"危险区域一氧化碳"
          coAlertValue: null,
          cO2Label: '', //"二氧化碳"
          cO2AlertValue: null,
          o2Lable: '', //"氧气"
          o2AlertValue: null,
          nO2Lable: '', //"二氧化氮"
          nO2AlertValue: null,
          noiseLable: '', //"洞内噪声"
          noiseAlertValue: null
        }
      }
    }
  }
</script>

<style lang="scss" scoped></style>
